<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <style>
      body,
      html {
        padding: 0;
        margin: 0;
        height: 100%;
      }
      #vm{
        height: 100%;
        position: relative;
      }
      .motai{
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        z-index: 100000;
      }
      .box {
        width: 300px;
        position: absolute;
        overflow: hidden;
        left: 50%;
        top: 50%;
        margin-left: -150px;
        margin-top: -110px;
      }
      /* .box .img {
        height: 300px;
      } */
      .box .img img {
        width: 100%;
        height: 140px;
        float: left;
      }
      .bottom_button {
        height: 40px;
        background-color: #ccc;
        float: left;
        width: 100%;
      }
      .bottom_button .go_bg {
        height: 40px;
        background-color: aqua;
        width: 0;
        float: left;
      }
      .bottom_button .button {
        width: 40px;
        height: 40px;
        float: left;
        background-color: blueviolet;
        text-align: center;
        line-height: 40px;
        font-size: 32px;
        color: #fff;
        cursor: pointer;
        user-select: none;
      }
      .fragment {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        position: absolute;
      }
      .bgopcity {
        background-image: url('./pintu.png');
        background-size: contain;
        border-radius: 0;
      }
      .bg_img {
        background-image: url("./tu.jpg");
        z-index: 10;
      }
      .imgs{
        width: 50px;
        height: 40px;
        position: absolute;
      }
    </style>
    <div id="vm">
      <div class="motai">
          <div class="box">
              <div class="img"><img :src="bgImage" alt="" /></div>
              <div class="bottom_button">
                <div class="go_bg" :style="`width:${scrollWidth}px`"></div>
                <div @mousedown="drag" class="button">≡</div>
              </div>
              <img class="imgs" :src='queryImage' :style="`left:${scrollWidth}px;top:${fy}px;`" alt="">
              <button @click="fla">shuaxin</button>
            </div>
      </div>
    </div>
  </body>
  <link
    rel="stylesheet"
    href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
  />
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    var vm = new Vue({
      el: "#vm",
      data() {
        return {
          bgImage:'',
          queryImage:'',
          scrollWidth: 0,
          canDrag: true,
          fx: 0,
          fy: 0,
          successTime: 0,
          isSuccess:false,
        };
      },
      mounted() {
        this.getImage()
        // this.fy = parseInt(Math.random() * 200);
        // this.fx = parseInt(Math.random() * 140) + 100;
      },
      methods: {
        getImage(){
          axios.get('http://192.168.9.131:8086/slide').then((res)=>{
            this.bgImage=res.data.targetImage
            this.queryImage=res.data.templateImage
            this.fy=res.data.y
            this.scrollWidth=0;
          })
        },
        fla(){
          this.isSuccess=false;
          this.scrollWidth=0;
          this.getImage();
          // this.fy = parseInt(Math.random() * 200);
          // this.fx = parseInt(Math.random() * 140) + 100;
        },
        drag() {
        //   if (!this.canDrag)return;
          let first = {};
          let tx;
          let that = this;
          let times = 0;
          if (that.isSuccess) return;
          that.canDrag = true;
          document.onmousemove=function(e) {
            if (!that.canDrag) return;
            if (!first.x) {
              first = { x: e.clientX };
              that.successTime = new Date().getTime();
            } else {
              tx = e.clientX - first.x;
            }
            if (tx < 260 && tx >= 0) {
              that.scrollWidth = tx;
            } else if (tx > 260) {
              that.scrollWidth = 260;
            } else if (tx < 0) {
              that.scrollWidth = 0;
            }
            // if (Math.abs(that.scrollWidth - that.fx) <= 5) {
            //   times++;
            // } else {
            //   if (times > 1) {
            //     times--;
            //   }
            // }
            // if (times > 3) {
            //   that.canDrag = false;
            //   that.isSuccess=true;
            //   that.scrollWidth=that.fx;
            //   that.successTime = parseFloat(
            //     (new Date().getTime() - that.successTime) / 1000
            //   ).toFixed(2);
            //   that.$message({
            //     message: "恭喜你，完成拼图，总耗时：" + that.successTime + "s",
            //     type: "success"
            //   });
            // }
          } 
          document.onmouseup = function() {
            if(that.canDrag){
              console.log(that.scrollWidth)
              that.isSuccess=true;
              that.canDrag=false;
              document.onmousemove=null;
              document.onmouseup=null;
            }
              // if(that.isSuccess){
              //   that.canDrag = false;
              //   return false;
              // }else{
              //   //that.scrollWidth = 0;
              //   that.canDrag = false;
              //   return false;
              // }
          };
        }
      }
    });
  </script>
</html>
